<template>
  <div class="home" 
  style="height:calc(100vh - 64px)">
    <!-- 选择站点和时间 -->
    <Row type="flex" 
    justify="start" 
    align="middle" 
    style="height:40px;">
      <i-col>
        <Form :model="selectedData" 
        :label-width="100" 
        inline>
          <FormItem label="道路选择：">
            <Select v-model="selectedData.station"
                    @on-change="handleSelectChange">
              <Option v-for="item in roadnameList"
                      :value="item.ch_name"
                      :key="item.ch_name">{{ item.ch_name }}</Option>
            </Select>
          </FormItem>
        </Form>
      </i-col>
      <i-col class="mytabs">
        <Tabs v-model="selectedData.dateTime" 
        @on-click="handleTabChange">
          <TabPane label="实时数据" 
                   name="today"></TabPane>
          <TabPane label="近7天" 
                   name="week"></TabPane>
          <TabPane label="近一月" 
                   name="month"></TabPane>
        </Tabs>
      </i-col>
      <i-col>
        <ExportExcel></ExportExcel>
      </i-col>
    </Row>
    <router-view></router-view>
  </div>
</template>

<script>
import constData from "@/util/constData";
import { mapState ,mapActions } from "vuex";
import ExportExcel from "./exportExcel.vue";
export default {
  name: "station-analysis",
  components: {
    ExportExcel
  },
  data() {
    return {
      selectedData: "",
      // stationList: constData.stationList,
      roadnameList: this.allRoadListData_noneall, // 道路列表
    };
  },
  computed: {
    ...mapState(["allRoadListData_noneall", "selectedStationData"]),
    getRoadNameList() {
      return this.allRoadListData_noneall;
    }
  },
  watch: {
    getRoadNameList: function (val) {
      this.roadnameList = val;
      // console.log("change val:", val)
      // console.log("change list:", this.roadnameList)
    }
  },
  created() {
    //异常关闭则为null
    if (window.sessionStorage.getItem("tempFlag_analysis") == null) {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login"
        });
      });
    }
    this.updateSelectedStationData(this.$route.params);
    this.selectedData = this.$store.state.selectedStationData;
    console.log("state.selectedStationData::", this.selectedStationData)
    console.log("selectedData.station:", this.selectedData)
    // this.selectedData = this.$store.state.selectedStationData;
  },
  mounted() {
    this.getAllRoadList2();
    window.onload = () => {
      if (window.sessionStorage.getItem("tempFlag_analysis") == "true") {
        window.sessionStorage.setItem("tempFlag_analysis", "false");
      }
    };
    window.onunload = function() {
      window.sessionStorage.setItem("tempFlag_analysis", "true");
      // window.sessionStorage["tempFlag"] = true;
    };
    window.onbeforeunload = function() {
      window.sessionStorage.setItem("tempFlag_analysis", "true");
      // window.sessionStorage["tempFlag"] = true;
    };
  },
  methods: {
    ...mapActions([
      "updateSelectedStationData",
      "initAllStateData",
      "handleLogOut",
      "getAllRoadList2"
    ]),
    handleTabChange(time) {
      this.$store.dispatch("initAllStateData");
      this.$store.dispatch("updateSelectedStationData", {
        station: this.selectedData.station,
        dateTime: time
      });
      this.$router.push({
        name: "station",
        params: { station: this.selectedData.station, dateTime: time }
      });
    },
    handleSelectChange(name) {
      this.$store.dispatch("initAllStateData");
      this.$store.dispatch("updateSelectedStationData", {
        station: name,
        dateTime: this.selectedData.dateTime
      });
      this.$router.push({
        name: "station",
        params: { station: name, dateTime: this.selectedData.dateTime }
      });
    }
  }
};
</script>

<style lang="less">
.mytabs {
  height: 6rem;
}
.mytabs .ivu-tabs .ivu-tabs-nav .ivu-tabs-tab-active {
  color: #fff !important;
}
.mytabs .ivu-tabs .ivu-tabs-tab {
  font-size: 1.4rem !important;
}
</style>
